import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provider/provider.dart';
import 'package:study_online/global/colors.dart';
import 'package:study_online/pages/loginRegisterPage/LoginRegisterViewModel.dart';
import 'package:study_online/routes/Application.dart';
import 'package:study_online/routes/Routes.dart';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //appBar: AppBar(
        //  backgroundColor: Colors.black26,
        //  title: Text('container'),
        //),
        body: LoginPage(),
      ),
    );
  }
}

class LoginPage extends StatefulWidget {
  LoginPage({Key key}) : super(key: key);

  @override
  _LoginPageState createState() {
    return _LoginPageState();
  }
}

class _LoginPageState extends State<LoginPage> {
  var controller, controller1;
  var _isDigit1 = 0, _isDigit2 = 0, _isFocus1 = 0, _isFocus2 = 0;
  FocusNode _focusNode1 = FocusNode(), _focusNode2 = FocusNode();

  @override
  void initState() {
    super.initState();
    controller = TextEditingController();
    controller1 = TextEditingController();
    _focusNode1.addListener(() {
      if (_focusNode1.hasFocus) {
        setState(() {
          _isFocus1 = 1;
        });
      } else {
        setState(() {
          _isFocus1 = 0;
        });
      }
    });
    _focusNode2.addListener(() {
      if (_focusNode2.hasFocus) {
        setState(() {
          _isFocus2 = 1;
        });
      } else {
        setState(() {
          _isFocus2 = 0;
        });
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    _focusNode1.unfocus();
    _focusNode2.unfocus();
  }

  @override
  Widget build(BuildContext context) {
    //debugPaintSizeEnabled=true;
    ScreenUtil.init(
      BoxConstraints(
          maxWidth: MediaQuery.of(context).size.width,
          maxHeight: MediaQuery.of(context).size.height),
      designSize: Size(361, 625),
    );
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        title: Center(
          child: Text(
            '登录',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: ScreenUtil().setSp(18),
              color: Colors.black,
            ),
          ),
        ),
      ),
      body: Container(
        color: Colors.white,
        child: Column(
          children: [
            //学号密码
            Container(
              //color: Colors.amber,
              width: double.infinity,
              height: ScreenUtil().setHeight(95),
              margin: EdgeInsets.only(
                  top: ScreenUtil().setHeight(64),
                  left: ScreenUtil().setWidth(20),
                  right: ScreenUtil().setWidth(20)),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    height: ScreenUtil().setHeight(40),
                    margin: EdgeInsets.fromLTRB(
                      ScreenUtil().setWidth(10),
                      ScreenUtil().setHeight(0),
                      ScreenUtil().setWidth(10),
                      ScreenUtil().setHeight(10),
                    ),
                    padding: EdgeInsets.fromLTRB(
                      ScreenUtil().setWidth(21),
                      ScreenUtil().setHeight(0),
                      ScreenUtil().setWidth(10),
                      ScreenUtil().setHeight(0),
                    ),
                    decoration: BoxDecoration(
                      color: AppColors.textBackground,
                      border: Border.all(
                        color: _focusNode1.hasFocus == false
                            ? Colors.transparent
                            : AppColors.primary,
                      ),
                      borderRadius: BorderRadius.all(
                        Radius.circular(ScreenUtil().setHeight(20)),
                      ),
                    ),
                    child: Center(
                      child: TextField(
                        focusNode: _focusNode1,
                        controller: controller,
                        cursorColor: Color(0xff2DCA97),
                        onChanged: (val) {
                          if (val == null) {
                            setState(() {
                              _isDigit1 = 0;
                            });
                          } else {
                            setState(() {
                              _isDigit1 = 1;
                            });
                          }
                        },
                        inputFormatters: [
                          FilteringTextInputFormatter.digitsOnly
                        ],
                        decoration: InputDecoration(
                          suffixIcon: IconButton(
                            icon: Icon(
                              Icons.close,
                              color: Color(0xffBEBEBE),
                            ),
                            onPressed: () {
                              controller.clear();
                            },
                          ),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.all(
                                Radius.circular(ScreenUtil().setHeight(20))),
                          ),
                          enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.transparent),
                          ),
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.transparent),
                          ),
                          hintText: '请输入学号',
                          hintStyle: TextStyle(
                            color: Color(0xffBEBEBE),
                            fontSize: ScreenUtil().setSp(15),
                          ),
                          labelStyle: TextStyle(
                              color: Color(0xffBEBEBE),
                              fontSize: ScreenUtil().setSp(20)),
                        ),
                      ),
                    ),
                  ),
                  Container(
                    height: ScreenUtil().setHeight(40),
                    margin: EdgeInsets.fromLTRB(
                      ScreenUtil().setWidth(10),
                      ScreenUtil().setHeight(0),
                      ScreenUtil().setWidth(10),
                      ScreenUtil().setHeight(0),
                    ),
                    padding: EdgeInsets.fromLTRB(
                      ScreenUtil().setWidth(21),
                      ScreenUtil().setHeight(0),
                      ScreenUtil().setWidth(10),
                      ScreenUtil().setHeight(0),
                    ),
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: _isFocus2 == 0
                            ? Colors.transparent
                            : AppColors.primary,
                      ),
                      color: AppColors.textBackground,
                      borderRadius: BorderRadius.all(
                          Radius.circular(ScreenUtil().setHeight(25))),
                    ),
                    child: Center(
                      child: TextField(
                        focusNode: _focusNode2,
                        controller: controller1,
                        obscureText: true,
                        cursorColor: Color(0xff2DCA97),
                        onChanged: (val) {
                          if (val == null) {
                            setState(() {
                              _isDigit2 = 0;
                            });
                          } else {
                            setState(() {
                              _isDigit2 = 1;
                            });
                          }
                        },
                        inputFormatters: [
                          FilteringTextInputFormatter.digitsOnly
                        ],
                        decoration: InputDecoration(
                          suffixIcon: IconButton(
                            icon: Icon(Icons.remove_red_eye_outlined,
                              color: AppColors.subtext,
                            ),
                            onPressed: (){
                              controller.clear();
                            },
                          ),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.all(
                                Radius.circular(ScreenUtil().setHeight(25))),
                          ),
                          enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.transparent),
                          ),
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.transparent),
                          ),
                          hintText: '请输入密码',
                          hintStyle: TextStyle(
                            color: Color(0xffBEBEBE),
                            fontSize: ScreenUtil().setSp(15),
                          ),
                          labelStyle: TextStyle(
                              color: Color(0xffBEBEBE),
                              fontSize: ScreenUtil().setSp(20)),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            //注册,忘记密码
            Container(
              height: ScreenUtil().setHeight(20),
              width: double.infinity,
              margin: EdgeInsets.only(
                  top: ScreenUtil().setHeight(34),
                  left: ScreenUtil().setWidth(20),
                  right: ScreenUtil().setWidth(20)),
              child: Row(
                children: <Widget>[
                  SizedBox(
                    width: ScreenUtil().setWidth(10),
                  ),
                  InkWell(
                    onTap: () {
                      Navigator.pushNamed(context, 'register');
                    },
                    child: Text(
                      '注册>',
                      style: TextStyle(
                        fontSize: ScreenUtil().setSp(14),
                        color: Color(0xffBEBEBE),
                      ),
                    ),
                  ),
                  Expanded(
                    child: Align(
                      alignment: Alignment.bottomRight,
                      child: InkWell(
                        onTap: () {},
                        child: Container(
                          margin:
                          EdgeInsets.only(right: ScreenUtil().setWidth(10)),
                          child: Text(
                            '忘记密码?',
                            style: TextStyle(
                              fontSize: ScreenUtil().setSp(14),
                              color: Color(0xffBEBEBE),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            //登录按钮
            Container(
              height: ScreenUtil().setHeight(46),
              width: double.infinity,
              margin: EdgeInsets.only(
                top: ScreenUtil().setHeight(70),
                left: ScreenUtil().setWidth(20),
                right: ScreenUtil().setWidth(20),
              ),
              child: Container(
                margin: EdgeInsets.only(
                  left: ScreenUtil().setWidth(30),
                  right: ScreenUtil().setWidth(30),
                ),
                child: RaisedButton(
                  child: Text(
                    '登录',
                    style: TextStyle(fontSize: ScreenUtil().setSp(20)),
                  ),
                  textColor: Colors.white,
                  color: _isDigit1 + _isDigit2 == 2
                      ? Color(0xff2DCA97)
                      : Color(0xffCDD1D4),
                  shape: StadiumBorder(),
                  onPressed: () {
                    Provider.of<LoginViewModel>(context, listen: false)
                        .login(controller.text, controller1.text);
                    //Navigator.pushNamed(context,"/app");
                  },
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(
                left: ScreenUtil().setWidth(55),
                right: ScreenUtil().setWidth(55),
                top: ScreenUtil().setHeight(53),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  InkWell(
                    child: Container(
                      width: ScreenUtil().setWidth(52),
                      margin: EdgeInsets.only(
                          left: ScreenUtil().setWidth(12),
                          right: ScreenUtil().setWidth(12)),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Image.asset(
                            'assets/img/qq.png',
                            width: ScreenUtil().setWidth(34),
                            height: ScreenUtil().setWidth(34),
                            fit: BoxFit.cover,
                          ),
                          Text(
                            'QQ登录',
                            style: TextStyle(fontSize: ScreenUtil().setSp(10)),
                          ),
                        ],
                      ),
                    ),
                    onTap: () {
                      Navigator.pushNamed(context, 'tabs');
                    },
                  ),
                  InkWell(
                    child: Container(
                      width: ScreenUtil().setWidth(52),
                      margin: EdgeInsets.only(
                          left: ScreenUtil().setWidth(12),
                          right: ScreenUtil().setWidth(12)),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Image.asset(
                            'assets/img/wechat.png',
                            width: ScreenUtil().setWidth(34),
                            height: ScreenUtil().setWidth(34),
                            fit: BoxFit.cover,
                          ),
                          Text(
                            '微信登录',
                            style: TextStyle(fontSize: ScreenUtil().setSp(10)),
                          ),
                        ],
                      ),
                    ),
                    onTap: () {},
                  ),
                  InkWell(
                    child: Container(
                      width: ScreenUtil().setWidth(52),
                      margin: EdgeInsets.only(
                          left: ScreenUtil().setWidth(12),
                          right: ScreenUtil().setWidth(12)),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Image.asset(
                            'assets/img/microblog.png',
                            width: ScreenUtil().setWidth(34),
                            height: ScreenUtil().setWidth(34),
                            fit: BoxFit.cover,
                          ),
                          Text(
                            '微博登录',
                            style: TextStyle(fontSize: ScreenUtil().setSp(10)),
                          ),
                        ],
                      ),
                    ),
                    onTap: () {},
                  ),
                ],
              ),
            ),
            Expanded(
              child: Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  alignment: Alignment.bottomCenter,
                  child: Image.asset('assets/img/login_bg.png',
                      width: double.infinity, fit: BoxFit.fitWidth),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
